<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <title>列表页</title>
    <link rel="stylesheet" href="../librarys/font-awesome-4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../styles/css-mb.css">
</head>
<body>
<div class="list-container">
    <!--头部-->
    <div class="list-head">
        <div class="hd">
            <ul>
                <li class="on">套餐</li>
                <li>案例</li>
                <li>商家</li>
            </ul>
        </div>
    </div>
    <div class="list-content-class">
        <!--标题-->
        <div class="list-content-title">
            <ul>
                <li class="list-class-choice-title1 no-on" href="#list-class-choice-title1"><span>摄像师</span> <i class="fa fa-caret-down fa-lg"></i> </li>
                <li class="list-class-choice-title2 no-right-border" href="#list-class-choice-title2"><span>默认排序</span> <i class="fa fa-caret-down fa-lg"></i> </li>
            </ul>
        </div>
        <!--排序内容-->
        <div class="list-bgcolor" id="lanrenzhijia">
            <div class="tab-container">
                <div class="list-class-content" id="list-class-choice-title1">
                    <ul>
                        <li class="on"><span>摄像师</span><i class="fa fa-check"></i> </li>
                        <li><span>车队</span><i class="fa fa-check"></i> </li>
                        <li><span>礼服</span><i class="fa fa-check"></i> </li>
                        <li><span>摄影师</span><i class="fa fa-check"></i> </li>
                        <li><span>化妆师</span><i class="fa fa-check"></i> </li>
                        <li><span>酒店</span><i class="fa fa-check"></i> </li>
                        <li><span>司仪</span><i class="fa fa-check"></i> </li>
                        <li><span>司仪</span><i class="fa fa-check"></i> </li>
                        <li><span>司仪</span><i class="fa fa-check"></i> </li>
                        <li><span>司仪</span><i class="fa fa-check"></i> </li>
                        <li><span>司仪</span><i class="fa fa-check"></i> </li>
                        <li><span>司仪</span><i class="fa fa-check"></i> </li>
                        <li><span>司仪</span><i class="fa fa-check"></i> </li>
                        <li><span>司仪</span><i class="fa fa-check"></i> </li>
                        <li><span>司仪</span><i class="fa fa-check"></i> </li>
                        <li><span>司仪</span><i class="fa fa-check"></i> </li>
                        <li><span>司仪</span><i class="fa fa-check"></i> </li>
                        <li><span>司仪</span><i class="fa fa-check"></i> </li>
                        <li><span>司仪</span><i class="fa fa-check"></i> </li>
                        <li><span>司仪</span><i class="fa fa-check"></i> </li>
                        <li><span>司仪</span><i class="fa fa-check"></i> </li>
                        <li><span>司仪</span><i class="fa fa-check"></i> </li>
                        <li><span>司仪</span><i class="fa fa-check"></i> </li>
                        <li><span>司仪</span><i class="fa fa-check"></i> </li>
                        <li><span>司仪</span><i class="fa fa-check"></i> </li>
                        <li><span>司仪</span><i class="fa fa-check"></i> </li>
                        <li><span>司仪</span><i class="fa fa-check"></i> </li>
                        <li class="no-bottom-border"><span>花艺气球</span><i class="fa fa-check"></i> </li>
                    </ul>
                </div>
                <div class="list-class-content1" id="list-class-choice-title2">
                    <ul>
                        <li class="on"><span>默认排序</span><i class="fa fa-check"></i> </li>
                        <li><span>喜欢最多</span><i class="fa fa-check"></i> </li>
                        <li class="no-bottom-border"><span>作品最多</span><i class="fa fa-check"></i> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="list-content">
        <div class="bd">
            <ul>
                <li>
                    <div class="list-content-taocan">
                        <a href="#"><img src="../images/list(mb)-img1.jpg"></a>
                        <div class="list-content-taocan-txt">
                            <a href="#">【品鉴国际婚礼定制】新中式复古婚礼</a>
                            <p><span>品鉴国际婚礼定制</span><i>¥58000.00<del>¥78000.00</del></i></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="list-content-taocan">
                        <a href="#"><img src="../images/list(mb)-img1.jpg"></a>
                        <div class="list-content-taocan-txt">
                            <a href="#">【品鉴国际婚礼定制】新中式复古婚礼</a>
                            <p><span>品鉴国际婚礼定制</span><i>¥58000.00<del>¥78000.00</del></i></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="list-content-taocan">
                        <a href="#"><img src="../images/list(mb)-img1.jpg"></a>
                        <div class="list-content-taocan-txt">
                            <a href="#">【品鉴国际婚礼定制】新中式复古婚礼</a>
                            <p><span>品鉴国际婚礼定制</span><i>¥58000.00<del>¥78000.00</del></i></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="list-content-taocan">
                        <a href="#"><img src="../images/list(mb)-img1.jpg"></a>
                        <div class="list-content-taocan-txt">
                            <a href="#">【品鉴国际婚礼定制】新中式复古婚礼</a>
                            <p><span>品鉴国际婚礼定制</span><i>¥58000.00<del>¥78000.00</del></i></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="list-content-taocan">
                        <a href="#"><img src="../images/list(mb)-img1.jpg"></a>
                        <div class="list-content-taocan-txt">
                            <a href="#">【品鉴国际婚礼定制】新中式复古婚礼</a>
                            <p><span>品鉴国际婚礼定制</span><i>¥58000.00<del>¥78000.00</del></i></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="list-content-taocan">
                        <a href="#"><img src="../images/list(mb)-img1.jpg"></a>
                        <div class="list-content-taocan-txt">
                            <a href="#">【品鉴国际婚礼定制】新中式复古婚礼</a>
                            <p><span>品鉴国际婚礼定制</span><i>¥58000.00<del>¥78000.00</del></i></p>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#" class="list-more">查看全部套餐<i class="fa fa-chevron-circle-right"></i></a>
                </li>
            </ul>
            <ul>
                <li>
                    <div class="list-content-taocan">
                        <a href="#"><img src="../images/list(mb)-img1.jpg"></a>
                        <div class="list-content-taocan-txt">
                            <a href="#">【品鉴国际婚礼定制】新中式复古婚礼</a>
                            <p><span>品鉴国际婚礼定制</span></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="list-content-taocan">
                        <a href="#"><img src="../images/list(mb)-img1.jpg"></a>
                        <div class="list-content-taocan-txt">
                            <a href="#">【品鉴国际婚礼定制】新中式复古婚礼</a>
                            <p><span>品鉴国际婚礼定制</span></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="list-content-taocan">
                        <a href="#"><img src="../images/list(mb)-img1.jpg"></a>
                        <div class="list-content-taocan-txt">
                            <a href="#">【品鉴国际婚礼定制】新中式复古婚礼</a>
                            <p><span>品鉴国际婚礼定制</span></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="list-content-taocan">
                        <a href="#"><img src="../images/list(mb)-img1.jpg"></a>
                        <div class="list-content-taocan-txt">
                            <a href="#">【品鉴国际婚礼定制】新中式复古婚礼</a>
                            <p><span>品鉴国际婚礼定制</span></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="list-content-taocan">
                        <a href="#"><img src="../images/list(mb)-img1.jpg"></a>
                        <div class="list-content-taocan-txt">
                            <a href="#">【品鉴国际婚礼定制】新中式复古婚礼</a>
                            <p><span>品鉴国际婚礼定制</span></p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="list-content-taocan">
                        <a href="#"><img src="../images/list(mb)-img1.jpg"></a>
                        <div class="list-content-taocan-txt">
                            <a href="#">【品鉴国际婚礼定制】新中式复古婚礼</a>
                            <p><span>品鉴国际婚礼定制</span></p>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#" class="list-more">查看全部套餐<i class="fa fa-chevron-circle-right"></i></a>
                </li>
            </ul>
            <ul>
                <li>
                    <div class="list-content-shop">
                        <div class="list-content-shop-img">
                            <a href="#"> <img src="../images/shop-mb-logo.jpg"></a>
                        </div>
                        <div class="list-content-shop-txt">
                            <div class="list-content-shop-txt-content">
                                <a href="#">PIXELFILM婚礼摄影工作室</a>
                                <p><span>免</span><span>定</span><span>礼</span></p>
                                <p><i>套餐 8</i><i>案例 19</i><i>粉丝 86</i></p>
                            </div>

                        </div>
                    </div>
                </li>
                <li>
                    <div class="list-content-shop">
                        <div class="list-content-shop-img">
                            <a href="#"> <img src="../images/shop-mb-logo.jpg"></a>
                        </div>
                        <div class="list-content-shop-txt">
                            <div class="list-content-shop-txt-content">
                                <a href="#">PIXELFILM婚礼摄影工作室</a>
                                <p><span>免</span><span>定</span><span>礼</span></p>
                                <p><i>套餐 8</i><i>案例 19</i><i>粉丝 86</i></p>
                            </div>

                        </div>
                    </div>
                </li>
                <li>
                    <div class="list-content-shop">
                        <div class="list-content-shop-img">
                            <a href="#"> <img src="../images/shop-mb-logo.jpg"></a>
                        </div>
                        <div class="list-content-shop-txt">
                            <div class="list-content-shop-txt-content">
                                <a href="#">PIXELFILM婚礼摄影工作室</a>
                                <p><span>免</span><span>定</span><span>礼</span></p>
                                <p><i>套餐 8</i><i>案例 19</i><i>粉丝 86</i></p>
                            </div>

                        </div>
                    </div>
                </li>
                <li>
                    <div class="list-content-shop">
                        <div class="list-content-shop-img">
                            <a href="#"> <img src="../images/shop-mb-logo.jpg"></a>
                        </div>
                        <div class="list-content-shop-txt">
                            <div class="list-content-shop-txt-content">
                                <a href="#">PIXELFILM婚礼摄影工作室</a>
                                <p><span>免</span><span>定</span><span>礼</span></p>
                                <p><i>套餐 8</i><i>案例 19</i><i>粉丝 86</i></p>
                            </div>

                        </div>
                    </div>
                </li>
                <li>
                    <a href="#" class="list-more">查看全部套餐<i class="fa fa-chevron-circle-right"></i></a>
                </li>
            </ul>
        </div>
    </div>


</div>
<script src="../librarys/nicescroll/js/jquery.min.js"></script>
<script src="../librarys/superslider/jquery.SuperSlide.2.1.1.js"></script>
<script>
    jQuery(".list-container").slide({trigger:"click"});
</script>
<script src="../librarys/nicescroll/js/jquery.nicescroll.js"></script>
<script>
    $("#lanrenzhijia").niceScroll({
        cursorcolor:"#888888",
        cursoropacitymax:1,
        touchbehavior:false,
        cursorwidth:"5px",
        cursorborder:"0",
        cursorborderradius:"5px"
    });

</script>

<script>
//    <!--tab类别切换-->
    var tabTitle=$(".list-content-title ul li");
    $(tabTitle).click(function(){
        $(tabTitle).removeClass("active");
        $(this).addClass("active");
        $(".tab-container").children("div").hide();
        var activeTab = $(this).attr("href");
        $(activeTab).fadeIn();
        $(this).parents('.list-content-title').siblings('.list-bgcolor').css('display','block');
        $('.list-container').css('position','fixed');
        return false;
    });

    var ClassOn=$(".list-class-content ul li");
    $(ClassOn).click(function(){
        $(ClassOn).removeClass("on");
        $(this).addClass("on");
        $(this).parents('.list-class-content').css('display','none');
        $(this).parents('.list-bgcolor').siblings('.list-content-title').find('.active').removeClass('active');//tab三角变换
        $(this).parents('.list-bgcolor').siblings('.list-content-title').find('.list-class-choice-title1 span').text($(this).children("span").text());//类别选择之后替换tab文本
        $(this).parents('.list-bgcolor').css('display','none');//选择分类后遮罩层关闭
        $('.list-container').css('position','relative');//页面恢复滑动
        return false;
    });
    var ClassOn1=$(".list-class-content1 ul li");
    $(ClassOn1).click(function(){
        $(ClassOn1).removeClass("on");
        $(this).addClass("on");
        $(this).parents('.list-class-content').css('display','none');
        $(this).parents('.list-bgcolor').siblings('.list-content-title').find('.active').removeClass('active');//tab三角变换
        $(this).parents('.list-bgcolor').siblings('.list-content-title').find('.list-class-choice-title2 span').text($(this).children("span").text());//类别选择之后替换tab文本
        $(this).parents('.list-bgcolor').css('display','none');//选择分类后遮罩层关闭
        $('.list-container').css('position','relative');//页面恢复滑动
        return false;
    });

//    点击遮罩层关闭
    var bgcolor = $('.list-bgcolor');
    $(bgcolor).click(function () {
        $(this).css('display','none');
        $(this).fadeOut();
        $(this).siblings('.list-content-title').find('.active').removeClass('active');
        $('.list-container').css('position','relative');
    });

</script>
</body>
</html>